<style>@import "css/ui.jqgrid.css";</style>
<script src="js/i18n/grid.locale-en.js" type="text/javascript" language="javascript"> </script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript" language="javascript"> </script>	
<script>
	function fill_grid(object,datamember,year,month){
		var vurl = 'getData.php?opt=finDashboard&datamember='+datamember+'&year='+year+'&month='+month;
		jQuery(object).jqGrid({
		url: vurl,datatype: "json",
		height: 'auto',
		colNames:['Enterprise','', 'Total(GTQ)'],
		colModel:[
			{name:'enterpriseName'},
			{name:'categoryName',width:300},
			{name:'total_GTQ',  width:90,formatter:"number", align:"center",summaryType:'sum'}   		
		],   	   	   
		grouping: true,groupingView : {
			groupField : ['enterpriseName'],
			groupColumnShow : [false],   		
			groupCollapse : false,
			groupOrder: ['asc'],
			groupSummary : [true],
			showSummaryOnHide: true		
		},caption: $(object).attr('name'), loadonce:false
		});
	}
	function reload_grid(object,datamember,year,month){		
		var vurl = 'getData.php?opt=finDashboard&datamember='+datamember+'&year='+year+'&month='+month;
		jQuery(object).jqGrid('setGridParam', { url:vurl})
        .trigger('reloadGrid', [{ page: 1}]);
	}
	$(document).ready(function(){		
		$('#lstMonth').val(<?=date('n')?>);
		var o = new Option('<?=date('Y')-1;?>', '<?=date('Y')-1;?>');$(o).html('<?=date('Y')-1;?>');$("#lstYear").append(o);
		var o = new Option('<?=date('Y');?>', '<?=date('Y');?>');$(o).html('<?=date('Y');?>');$("#lstYear").append(o);
		var o = new Option('<?=date('Y')+1;?>', '<?=date('Y')+1;?>');$(o).html('<?=date('Y')+1;?>');$("#lstYear").append(o);
		$('#lstYear').val('<?=date('Y');?>');
		fill_grid('#incomes','income',<?=date('Y')?>,<?=date('n')?>);
		fill_grid('#expenses','expense',<?=date('Y')?>,<?=date('n')?>);
		fill_grid('#reimbursements','reimbursement',<?=date('Y')?>,<?=date('n')?>);			
		$( "#lstMonth" ).change(function() {						
			reload_grid('#incomes','income',$('#lstYear').val(),$('#lstMonth').val());
			reload_grid('#expenses','expense',$('#lstYear').val(),$('#lstMonth').val());
			reload_grid('#reimbursements','reimbursement',$('#lstYear').val(),$('#lstMonth').val());
		});
		$( "#lstYear" ).change(function() {					
			reload_grid('#incomes','income',$('#lstYear').val(),$('#lstMonth').val());
			reload_grid('#expenses','expense',$('#lstYear').val(),$('#lstMonth').val());
			reload_grid('#reimbursements','reimbursement',$('#lstYear').val(),$('#lstMonth').val());
		});
	});
	</script>
<h1> Financial Dashboard</h1>
<p>
Choose a date: 
	<select id="lstMonth" name="lstMonth">
		<option value="1">January</option>
		<option value="2">February</option>
		<option value="3">March</option>
		<option value="4">April</option>
		<option value="5">May</option>
		<option value="6">June</option>
		<option value="7">July</option>
		<option value="8">August</option>
		<option value="9">September</option>
		<option value="10">October</option>
		<option value="11">November</option>
		<option value="12">December</option>
	</select>
	<select id="lstYear" name="lstYear"></select>
</p>
<div class="dashboard">
	<div class="dashboardRow">
		<div class="dashboardCell"><table id="incomes" name="Incomes"></table></div>
		<div class="dashboardCell"><table id="expenses" name="Expenses"></table></div>
		<div class="dashboardCell"><table id="reimbursements" name="Reimbursements"></table></div>
	</div>
</div>
<h1> Actions </h1>
<div class="actionsMenu">
	<div class="actionsMenuRow">
		<div class="actionsMenuCell"><a href="?<?=$_SERVER['QUERY_STRING']?>&option=IT"> Income Tracking</a></div>
		<div class="actionsMenuCell"><a href="?<?=$_SERVER['QUERY_STRING']?>&option=ET"> Expense Tracking</a></div>
		<div class="actionsMenuCell"><a href="?<?=$_SERVER['QUERY_STRING']?>&option=RT"> Reimbursement Tracking</a></div>		
	</div>
	<div class="actionsMenuRow">
		<div class="actionsMenuCell"><a href="?action=ONMAINTENANCE"> Invoices</a></div>
	</div>
</div>
<h1> Reports </h1>
<div class="actionsMenu">
	<div class="actionsMenuRow">
		<div class="actionsMenuCell"><a href="?<?=$_SERVER['QUERY_STRING']?>&option=RPT"> Annual Reports</a></div>		
		<div class="actionsMenuCell"><a href="?action=ONMAINTENANCE">Monthly Reports</a></div>		
		<div class="actionsMenuCell" style="background-color:transparent;"></div>		
	</div>	
</div>
